<script lang="ts" setup>
import type { PropsDefination, PropsModel } from './extends/props'
import { FormProps, MessagePlugin } from 'tdesign-vue-next'
import { manifest } from 'tdesign-icons-vue-next'
import { ref } from 'vue'

const visible = defineModel<PropsModel['visible']>('visible')
const data = defineModel<PropsModel['data']>('data')
const props = defineProps<PropsDefination>()
const eimts = defineEmits(['onSubmit', 'onReset'])

/**
 * 组件说明
 * @template {HeaderForm} 放置于头部表单的插槽，如果需要自定义很强的表单项，请使用该插槽
 */

const typeHeader = {
  info: '详情',
  edit: '编辑',
  add: '新增',
}

const iconOptions = ref(manifest)

/**
 * @param key 属性字段
 */
const onControlItem = (key: string, type: 'show' | 'disabled'): boolean => {
  if (key in data.value) {
    if (key in props.formOption) {
      if (type in props.formOption[key]!) {
        return props.formOption[key]![type]!(data.value[key], data.value)
      } else {
        return type === 'show'
      }
    } else {
      return type === 'show'
    }
  } else {
    return type !== 'show'
  }
}

const onSubmit: FormProps['onSubmit'] = ({ validateResult, firstError }) => {
  if (validateResult === true) {
    eimts('onSubmit')
  } else {
    MessagePlugin.warning(firstError!)
  }
}
</script>

<template>
  <t-dialog
    v-model:visible="visible"
    :header="typeHeader[type] + ' - ' + header"
    attach="body"
    width="640px"
    :confirmBtn="null!"
    :cancel-btn="null!"
  >
    <t-form
      :data="data"
      label-align="top"
      :label-width="82"
      layout="inline"
      :rules="rules"
      @submit="onSubmit"
      @reset="eimts('onReset')"
      style="gap: 24px"
    >
      <slot name="HeaderForm"></slot>
      <template v-for="(value, key) in formOption" :key="key">
        <t-form-item
          :label="value!.label"
          class="form-item-width"
          v-if="onControlItem(key.toString(), 'show')"
          :name="key.toString()"
        >
          <!-- 输入框 -->
          <t-input
            clearable
            v-model="data[key]"
            :readonly="type === 'info'"
            :disabled="onControlItem(key.toString(), 'disabled')"
            v-if="value!.type === 'input'"
          ></t-input>

          <!-- 联级选择器 -->
          <t-cascader
            v-model="data[key as string]"
            :options="value!.option"
            filterable
            check-strictly
            :readonly="type === 'info'"
            :disabled="onControlItem(key.toString(), 'disabled')"
            v-if="value!.type === 'cascader'"
          />

          <!-- 开关 -->
          <t-switch
            v-model="data[key as string]"
            :readonly="type === 'info'"
            :disabled="onControlItem(key.toString(), 'disabled')"
            v-if="value!.type === 'switch'"
          ></t-switch>

          <!-- 选择器 -->
          <t-select
            clearable
            v-model="data[key as string]"
            :readonly="type === 'info'"
            :disabled="onControlItem(key.toString(), 'disabled')"
            v-if="value!.type === 'select'"
            :options="value!.option"
          ></t-select>

          <!-- 多选选择器 -->
          <t-select
            clearable
            v-model="data[key as string]"
            :readonly="type === 'info'"
            :disabled="onControlItem(key.toString(), 'disabled')"
            v-if="value!.type === 'select-m'"
            :options="value!.option"
            multiple
          ></t-select>

          <!-- 单选框 -->
          <t-radio-group
            v-model="data[key as string]"
            :readonly="type === 'info'"
            :disabled="onControlItem(key.toString(), 'disabled')"
            v-if="value!.type === 'radio'"
          >
            <t-radio v-for="item in value!.option" :value="item.value">{{ item.label }}</t-radio>
          </t-radio-group>

          <!-- 图标选择器 -->
          <t-select
            v-model="data[key as string]"
            :readonly="type === 'info'"
            :popup-props="{ overlayInnerStyle: { width: '400px' } }"
            :disabled="onControlItem(key.toString(), 'disabled')"
            v-if="value!.type === 'icon-select'"
            placeholder="请选择目录的图标"
          >
            <t-option
              v-for="item in iconOptions"
              :key="item.stem"
              :value="item.stem"
              style="display: inline-block; font-size: 16px"
            >
              <t-icon :name="item.stem" />
            </t-option>
            <template #valueDisplay>
              <t-icon :name="data[key as string]" :style="{ marginRight: '8px' }" />
              {{ data[key as string] }}
            </template>
          </t-select>
        </t-form-item>
      </template>

      <t-form-item style="width: 100%; margin-right: 0" v-if="type !== 'info'">
        <t-space style="margin-left: auto">
          <t-button theme="default" variant="base" type="reset">重置</t-button>
          <t-button theme="primary" type="submit" :loading="sumbitLoading">提交</t-button>
        </t-space>
      </t-form-item>
    </t-form>
  </t-dialog>
</template>

<style lang="scss" scoped>
.form-item-width {
  width: calc(50% - 12px);
  min-width: calc(50% - 12px);
  max-width: calc(50% - 12px);
  flex-basis: calc(50% - 12px);
  margin-right: 0;
}
</style>
